<template>
    <div class="container">
        <div class="columns">
  <div class="column is-2">
    <p class="notification is-primary"><code>is-2</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-3">
    <p class="notification is-primary"><code>is-3</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centerced">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-4">
    <p class="notification is-primary"><code>is-4</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-5">
    <p class="notification is-primary"><code>is-5</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-6">
    <p class="notification is-primary"><code>is-6</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-7">
    <p class="notification is-primary"><code>is-7</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-8">
    <p class="notification is-primary"><code>is-8</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-9">
    <p class="notification is-primary"><code>is-9</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-10">
    <p class="notification is-primary"><code>is-10</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
  <div class="column">
    <p class="notification is-success has-text-centered">1</p>
  </div>
</div>

<div class="columns">
  <div class="column is-11">
    <p class="notification is-primary"><code>is-11</code></p>
  </div>
  <div class="column">
    <p class="notification is-warning has-text-centered">1</p>
  </div>
</div>



        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>

        <el-button plain @click="open">
            可自动关闭
        </el-button>
        <el-button type="text" @click="open1">点击打开 Message Box</el-button>

        <modal title="Modal!" :width="520" :is-show="isShow" transition="fadeDown" @close="isShow=false">
            <h4>Text in a modal</h4>
            <p>
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel
                scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
            </p>
        </modal>
        <button @click="toggle" class="button is-primary">基本模态框</button>

        <el-button @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">Loading</el-button>
    </div>
</template>
<script>
    export default {
        data:function(){
            return {
                isShow:false,
                fullscreenLoading: false
            }
        },
        methods: {
            open() {
                const h = this.$createElement;

                this.$notify({
                    title: '标题名称',
                    message: h('p', { style: 'color: red' }, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
                });
            },

            open1() {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`
                        });
                    }
                });
            },
            toggle(){
                this.isShow=!this.isShow
            },
            openFullScreen() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                this.fullscreenLoading = false;
                }, 3000);
            }
        }
    }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>